<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_traceAnalyst"></title>
    <style>
      #toolbar {
         position: absolute;
         top: 50px;
         right: 10px;
         width: 280px;
         text-align: center;
         z-index: 100;
         border-radius: 4px;
       }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary">
  <div class='panel-heading'>
      <h5 class='panel-title text-center' data-i18n="resources.text_traceAnalyst"></h5></div>
  <div class='panel-body content'>
      <div class='panel'>
        <div class='input-group'>
            <span class='input-group-addon' data-i18n="resources.text_traceType"></span>
            <select id='traceType' class='form-control'>
              <option value=0 data-i18n="resources.text_traceUp"></option>
              <option value=1 data-i18n="resources.text_traceDown"></option>
            </select>
          </div>
      </div>
      <div class='panel'>
        <div class='input-group'>
            <span class='input-group-addon' data-i18n="resources.text_isUncertainDirectionValid"></span>
            <select id='isUncertainDirectionValid' class='form-control'>
              <option value=0>false</option>
              <option value=1 selected>true</option>
            </select>
          </div>
      </div>
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_traceAnalyst"
              onclick="traceAnalystProcess()"/>&nbsp;
      <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_clearLayer"
              onclick="removeLayer()"/>
  </div>
</div>
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
<script type="text/javascript">
    var map, options, resultLayer,
        baseUrl = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-changchun/rest/maps/长春市区图",
        serviceUrl = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun";
    var extent = [48.4, -7668.25, 8958.85, -55.58];
    var projection = new ol.proj.Projection({
        code:'',
        extent: extent,
        units: 'm'
    });
    new ol.supermap.MapService(baseUrl).getMapInfo(function (serviceResult) {
        var mapJSONObj = serviceResult.result;
        map = new ol.Map({
            target: 'map',
            // ol v7版本用法为ol.control.defaults.defaults； v6版本以下用法为ol.control.defaults
            controls: ol.control.defaults.defaults({attributionOptions: {collapsed: false}})
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [5000, -3700],
                zoom: 2,
                projection: projection,
                multiWorld: true
            })
        });
        options = ol.source.TileSuperMapRest.optionsFromMapJSON(baseUrl, mapJSONObj);
        var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest(options)
        });
        map.addLayer(layer);
        addLayer();
    });

    function addLayer() { 
        // 添加需查找上/下游设施的要素
        var param = new ol.supermap.QueryBySQLParameters({
        queryParams: {
            name: "RoadNet@Changchun",
            attributeFilter: "SMID = 101"
        }
        });
        new ol.supermap.QueryService(baseUrl).queryBySQL(param).then(function (serviceResult) {
            var vectorSource = new ol.source.Vector({
                features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
                wrapX: false
            });
            resultLayer = new ol.layer.Vector({
                source: vectorSource,
                style: new ol.style.Style({
                  stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 5
                })
              })
            });
            map.addLayer(resultLayer);
        });
    }

    function traceAnalystProcess() {
        removeLayer();
        var traceType = +document.getElementById("traceType").value;
        var isUncertainDirectionValid = document.getElementById("isUncertainDirectionValid").value === "0" ? false : true;
        var traceAnalystParameters = new ol.supermap.TraceAnalystParameters({
            edgeID:101,
            traceType:traceType,
            weightName:"",
            isUncertainDirectionValid: isUncertainDirectionValid,
            returnFeatures: true
        });

        //进行查找
        new ol.supermap.NetworkAnalystService(serviceUrl).traceAnalyst(traceAnalystParameters).then(function (serviceResult) {
            var traceSource = new ol.source.Vector({
                features: (new ol.format.GeoJSON()).readFeatures(serviceResult.result.edgesFeatures)
            });
            resultLayer = new ol.layer.Vector({
                source: traceSource
            })
            map.addLayer(resultLayer);
        });
       
    }
    //移除结果图层
    function removeLayer() {
      if (map.getLayers().getLength() > 2) {
          map.removeLayer(resultLayer);
      }
    }
</script>
</body>
</html>